<template>
  <div class="so">
    <div class="so_top">
      <img src="https://imagev2.xmcdn.com/storages/770d-audiofreehighqps/04/BC/GKwRIW4GO9CUAAAkqAFDcwBL.png" @click="goHome">
      

      <div class="search_input flex">
        <input  class="input"  type="text" clearable placeholder="专辑/声音/主播" v-model.trim="word"/>
        <span class="search_wrapper" @click="inputHandler(word)"><van-icon name="search" size="22" color="#fff"/></span>
       <div class="icon" @click="clearKey" v-if="!!word">x</div>
      </div>
      
    </div>
    <div class="content">
    <history :historyList="historyList" @clearList="clearHistoryList"></history>
    </div>
   
   <HotWordList :historyList="historyList" @inputHandler="inputHandler"></HotWordList>
  </div>

</template>

<script setup lang="ts">
import History from '@/components/History.vue';
import HotWordList from '@/components/HotWordList.vue';
import {useRouter} from 'vue-router'
import {ref,onMounted} from 'vue'
const router=useRouter()
const historyWord=ref('')
const word=ref()
const historyList=ref<string[]>([])
  onMounted(()=>{
    
  
 if(JSON.parse(sessionStorage.getItem('historyList')!) ){
  historyList.value=JSON.parse(sessionStorage.getItem('historyList')!) 
 }

})

const clearHistoryList=()=>{
  historyList.value=[]
  sessionStorage.removeItem('historyList')
}
const goHome=()=>{
  router.push({
    path:'/home'
  })
}
const clearKey=()=>{
  word.value=''  

}
const inputHandler=(e:any)=>{

  if(!e) return 
  if(typeof e =='string'){

    historyWord.value=e.trim()
  router.push({
    name:'Searchdetail',
    params:{
      keyWord:e 
    }
  })
}else{


   historyWord.value=word.value
  router.push({
    name:'Searchdetail',
    params:{
      keyWord:word.value
    }
  })

}

historyList.value.unshift(historyWord.value)

const set=new Set(historyList.value)
historyList.value=Array.from(set)


sessionStorage.setItem('historyList',JSON.stringify(historyList.value))

   
}

</script>

<style lang="less" scoped>
.so{
  padding: 80px 0px 0px;
  .so_top{
    text-align: center;
   
    img{
      width: 169px;
      height: 38px;
      margin-bottom: 30px;
    }
    .search_input{
      width: 280px;
        margin:0px 38px 40px;
        border:1px solid #f86442;
        height:20px;
        padding:10px 0px 10px 20px;
        align-items:center;
        font-size: 14px;
        border-radius: 20px;
        .input{
          width:220px;
        border: none;
          
        }
        .icon{
          position: absolute;
          right: 120px;
           

          color: blue;
          font-size: 18px;
        }
       
        .search_wrapper{
        display: inline-block;
          margin-left: 5px;
          background:#f86442;
          border-radius: 0px 20px 20px 0px;
          width:60px;
          height:40px;
          line-height:40px;
          border:1px solid #f86442;
          
          flex-shrink: 0;
        }
      }
    
  }
  .content{
    padding: 0px 15px;
  }
 
}

</style>